@import '../middleware/Theme/constants';

// This component is positioned on the page in ../middleware/Theme/layout.less
// Please only directly style DocContents and its contents here.

.DocContents {
	position: relative;
	box-sizing: border-box;

	padding: 0;
	width: 100vw;

	background: white;

	@media (min-width: @min-medium-screen) {
		margin: 0;

		border: 1px solid @border-color;
		border-radius: 2px;
		.default-box-shadow()
	}

	.contentsActivePage {
		// This little guy is mobile only.
		@media (min-width: @min-medium-screen) {
			display: none;
		}
		margin: 0;
		padding: 0.5rem @small-screen-gutter;

		border-top: 1px solid @border-color;
		border-bottom: 1px solid @border-color;
		font-size: 1rem;
	}

	.contentsActivePage svg {
		height: 0.875rem;
		fill: #585858;
		vertical-align: middle;
	}

	&.menuOpen .contentsActivePage svg {
		transform: rotateX(180deg);
		vertical-align: baseline;
	}


	.contentsSections {
		// Hidden by default on mobile.
		display: none;
		padding: @small-screen-gutter;
		border-bottom: 1px solid @border-color;

		@media (min-width: @min-medium-screen) {
			display: block;
			border-bottom: 0;
		}
	}

	&.menuOpen .contentsSections {
		display: block;
	}


	ul,
	li,
	h3 {
		padding: 0;
		margin: 0;
	}

	h3 {
		font-size: 1rem;
	}

	li {
		list-style-type: none;
		margin-top: 1rem;

		a {
			color: @font-color;
			text-decoration: none;
		}

		a:hover,
		&.active a {
			color: @active-color;
		}
	}

	.contentsSection + .contentsSection {
		margin-top: 1.5rem;
	}
}
